<template>
	<div>
		<el-button size="mini" type="primary" class="mb20"
				   @click="addroyaltyList('add')">新增提成方式
		</el-button>
		<el-table border v-loading="tableDataLoading" :data="tableData">
			<el-table-column v-for='(s, i) in tableOption' :key='i' :prop='s.prop' :label='s.label'
							 :min-width='s.width'
							 align='center'/>
			<el-table-column label='操作' prop='enabled' fixed='right' width='300'>
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="addroyaltyList('edit',scope.row)">编辑
					</el-button>
					<el-button size="mini" type="danger"
							   @click="addroyaltyList('del',scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--	添加价格表弹窗-->
		<el-dialog :title="royaltyList.titleName" :visible.sync="royaltyList.dialogFormVisible" width="1200px">
			<el-form :model="royaltyListDate"  ref="royaltyListDate" label-width="100px" v-loading="royaltyList.loading">
				<el-form-item label="名称" prop="name">
					<el-input v-model="royaltyListDate.name" placeholder="请输入" class="w500"></el-input>
					<el-button type="text" @click="addTimeRange('add')" class="ml10">添加时间段</el-button>
				</el-form-item>
				<el-card class="mb20" v-for="(TimeRange,timeRangeindex) in royaltyListDate.commissionItemList"
						 :key="timeRangeindex">
					<el-row>
						<el-col :span="24">
							<el-form-item label="服务时间">
								<el-time-picker
									is-range
									value-format="HH:mm:ss"
									@change="changetime($event,timeRangeindex)"
									v-model="TimeRange.value1"
									range-separator="至"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
									placeholder="选择时间范围">
								</el-time-picker>
								<el-button type="text" @click="addTimeRange('del',timeRangeindex)" class="ml10"
										   style="float: right;color: #B94A48" v-if="timeRangeindex!=0">移除该时间段
								</el-button>

							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item prop="type" label="当金额大于">
								<div v-for="(item, index) in TimeRange.commissionItemDetailList" :key="item.id"
									 class="mb20">
									<el-input v-model="TimeRange.commissionItemDetailList[index].minPrice"
											  placeholder="请输入内容"
											  class="w200">
										<template slot="append">元</template>
									</el-input>
									以上,每单扣取
									<el-input v-model="TimeRange.commissionItemDetailList[index].rate"
											  placeholder="请输入内容"
											  class="w200">
										<template slot="append">%</template>
									</el-input>
									余额,同时扣
									<el-input v-model="TimeRange.commissionItemDetailList[index].extraPrice"
											  placeholder="请输入内容"
											  class="w200">
										<template slot="append">元</template>
									</el-input>
									<el-button type="text" @click="additem('del',index,timeRangeindex)" class="ml10"
											   v-if="index!=0" style="color: #B94A48">移除
									</el-button>
								</div>

								<el-button type="primary" @click="additem('add',timeRangeindex,null)" class="ml20"
										   style="width: 75%">
									添加提成规则
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelroyaltyList">取 消</el-button>
				<el-button type="primary" @click="submitroyaltyList">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'royaltySetting',
	data () {
		return {
			tableDataLoading: false,
			tableData: [
				{reason: '每单公司抽成'}
			],
			tableOption: [
				{label: '提成名称', prop: 'name'},
			],
			royaltyListDate: {
				name: '',
				commissionItemList: [
					{
						startTime: null,
						endTime: null,
						commissionItemDetailList: [
							{
								minPrice: null,
								maxPrice: null,
								rate: null,
								extraPrice: null
							}
						]
					}
				],
				commissionItemDetailList: [
					{
						value1: '',
						commissionItemDetailList: [{
							time: '',
							pic: 0
						}]
					}
				]

			},
			royaltyList: {
				titleName: '',
				loading:false,
				dialogFormVisible: false,
				form: {},
				rules: {
					startTime: [
						{required: true, message: '请选择服务时间', trigger: 'change'},
					],
					reason: [
						{required: true, message: '请输入原因', trigger: 'blur'},
					],
				}
			}
		}
	},
	methods: {
		getList () {
			this.tableDataLoading = true
			this.$http({
				url: this.$http.adornUrl('sys/commission/list'),
				method: 'get',
			}).then(({
				data
			}) => {
				console.log(data)
				if (data.data && data.data.length) {
					this.tableDataLoading = false
					this.tableData = data.data
				} else {
					this.tableData = []
					this.$message({
						message: data.msg,
						type: 'error',
						duration: 1500
					})
				}
			}).finally(() => {
				this.tableDataLoading = false
			})
		},
		changetime (e, index) {
			if (e && e.length) {
				this.royaltyListDate.commissionItemList[index].startTime = e[0]
				this.royaltyListDate.commissionItemList[index].endTime = e[1]
			} else {
				this.royaltyListDate.commissionItemList[index].startTime = ''
				this.royaltyListDate.commissionItemList[index].endTime = ''
			}
		},
		addroyaltyList (state, item) {
			switch (state) {
				case 'add':
					this.royaltyList.dialogFormVisible = true
					this.royaltyList.titleName = '新增提成方式'
					this.royaltyListDate = {
						name: null,
						commissionItemList: [
							{
								value1:[],
								startTime: null,
								endTime: null,
								commissionItemDetailList: [
									{
										minPrice: null,
										maxPrice: null,
										rate: null,
										extraPrice: null
									}
								]
							}
						]
					}
					break
				case 'edit':
					this.royaltyList.dialogFormVisible = true
					this.royaltyList.titleName = '编辑提成方式'
					this.royaltyList.loading=true
					this.$http({
						url: '/sqx_fast/sys/commission/detail',
						method: 'get',
						params: {id:item.id}
					}).then(res=>{
						console.log('提成方式',res)
						this.royaltyListDate=res.data.data
						this.royaltyListDate.commissionItemList = this.royaltyListDate.commissionItemList.map(item=>{
							return{
								...item,
								value1:[item.startTime,item.endTime]
							}
						})
						this.$set(this,'royaltyListDate',this.royaltyListDate)
						this.royaltyList.loading=false
						})
					break
				case 'del':
					this.delitem(item)
					break
			}

		},
		delitem (item) {
			this.$confirm(`确定删除此条信息?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl(`sys/commission/delete`),
					method: 'get',
					params:{id:item.id}
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getList()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
						})
					}
				})
			}).catch(() => {
			})
		},
		//新增选项
		additem (state, item, pindex) {
			switch (state) {
				case 'add':
					let length = this.royaltyListDate.commissionItemList[item].commissionItemDetailList.length
					let sonitem = this.royaltyListDate.commissionItemList[item].commissionItemDetailList[length-1]
					if(sonitem.extraPrice == null  || sonitem.minPrice == null || sonitem.rate == null){
						return this.$message({
							message: "请填写提成规则",
							type: 'error',
							duration: 1500
						})
					}
					this.royaltyListDate.commissionItemList[item].commissionItemDetailList.push({
						minPrice: null,
						maxPrice: null,
						rate: null,
						extraPrice: null
					})
					break
				case 'del':
					this.royaltyListDate.commissionItemList[pindex].commissionItemDetailList.splice(item, 1)
					break
			}
		},
		submitroyaltyList () {
			if(this.royaltyListDate.name){
				this.saveForm()
			}else{
				this.$message({
					message:"请填写提成名称",
					type: 'error',
					duration: 1500
				})
			}

		},
		saveForm(){
			if(this.royaltyListDate.id){
				this.$http({
					url: this.$http.adornUrl('sys/commission/update'),
					method: 'post',
					data: this.royaltyListDate
				}).then(res=>{
					if(res.data.code==0){
						this.$message({
							message: '更新成功',
							type: 'success',
							duration: 1500
						})
						this.cancelroyaltyList()
						this.getList()
					}else{
						this.$message({
							message: res.msg,
							type: 'error',
							duration: 1500
						})
					}
				})
			}else{
				this.$http({
					url: this.$http.adornUrl('sys/commission/add'),
					method: 'post',
					data: this.royaltyListDate
				}).then(res=>{
					if(res.data.code==0){
						this.$message({
							message: '新增成功',
							type: 'success',
							duration: 1500
						})
						this.cancelroyaltyList()
						this.getList()
					}else{
						this.$message({
							message: res.msg,
							type: 'error',
							duration: 1500
						})
					}
				})
			}

		},
		cancelroyaltyList () {
			this.royaltyList.dialogFormVisible = false
			this.royaltyList.titleName = '编辑提成方式'
			this.royaltyListDate = {
				name: '',
				commissionItemDetailList: [
					{
						value1: '',
						commissionItemDetailList: [{
							time: '',
							pic: 0
						}]
					}
				]
			}
		},
		//	添加时间段
		addTimeRange (state, item) {
			switch (state) {
				case 'add':
					let length = this.royaltyListDate.commissionItemList.length
					let item = this.royaltyListDate.commissionItemList[length-1]
					let sonlength = item.commissionItemDetailList.length
					let sonitem = item.commissionItemDetailList[sonlength-1]
					console.log('item',item)
					if(item.startTime==null || item.endTime==null){
						return this.$message({
							message: "请选择服务时间区间",
							type: 'error',
							duration: 1500
						})
					}
					if(sonitem.extraPrice == null || sonitem.minPrice == null || sonitem.rate == null){
						return this.$message({
							message: "请填写提成规则",
							type: 'error',
							duration: 1500
						})
					}
					console.log()
					this.royaltyListDate.commissionItemList.push({
						startTime: null,
						endTime: null,
						commissionItemDetailList: [
							{
								minPrice: null,
								maxPrice: null,
								rate: null,
								extraPrice: null
							}
						]
					})
					break
				case 'del':
					this.royaltyListDate.commissionItemList.splice(item, 1)
					break
			}
		},
	}
}
</script>

<style scoped>
.mb20 {
	margin-bottom: 20px;
}

.w200 {
	width: 200px;
}

.w500 {
	width: 500px;
}

/deep/ .el-date-editor .el-range-separator {
	width: 6%;
}

.ml10 {
	margin-left: 10px;
}
</style>
